<template>
  <div class="box">
    <div class="left">
      <div class="header">
        <p>园区数据</p>
        <div class="headerFont">
          <span>年度累计收费 (元)
            <p class="item">{{ annualIncome }}</p>
          </span>
          <span>入驻企业总数 (个)
            <p class="item">{{ enterpriseTotal }}</p>
          </span>
          <span>月卡车辆总数 (辆)
            <p class="item">{{ monthCardTotal }}</p>
          </span>
          <span>一体杆总数 (台)
            <p class="item">{{ chargePoleTotal }}</p>
          </span>
        </div>
      </div>
      <div class="main">
        <p>年度收入统计</p>
        <div id="main" ref="boxRef" style="width: 100%;height:300px;margin-top:10px" />
      </div>
      <div class="footer">
        <p>临期合同提醒</p>
        <el-table :data="tableLIst">
          <el-table-column label="序号" />
          <el-table-column label="企业名称" prop="enterpriseName" />
          <el-table-column
            label="租赁楼宇"
            prop="buildingName"
          />
          <el-table-column label="租赁时间" prop="time">
            <template #default="{row}">
              {{ row.startTime+'至'+row.endTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <el-button type="text">续签</el-button>
            <el-button type="text">退租</el-button>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="right">
      <div class="top" />
      <div class="bottom" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

// 基于准备好的dom，初始化echarts实例

import { getListInfoAPI, getTableListAPI } from '@/api/dashboard'
export default {

  data() {
    return {
      homeData: {}, // 存放首页数据的对象
      // 表格数组
      tableLIst: [],
      social: '',
      time: [],
      params: {
        page: 1,
        pageSize: 10
      },
      annualIncome: null, // 年度累计收入
      enterpriseTotal: null, // 企业总数
      monthCardTotal: null, // 月卡总数
      chargePoleTotal: null, // 一体杆总数
      total: 10
    }
  },
  watch: {
    homeData() {
      this.social.setOption({
        legend: {
          data: ['物业费', '行车收入'],
          left: '10%'
        },
        tooltip: {
          trigger: 'axis'
        },

        xAxis: [
          {
            type: 'category',
            data: this.homeData.xmonth
          }
        ],
        yAxis: {},
        series: [
          {
            name: '物业费',
            type: 'bar',
            barWidth: '30%',
            stack: 'one',
            data: this.homeData.ybuilding
          },
          {
            name: '行车收入',
            type: 'bar',
            barWidth: '30%',
            stack: 'one',
            data: this.homeData.yparking
          }
        ]
      })
    }
  },
  created() {
    this.onInfo()
    this.onTableList()
  },
  mounted() {
    this.social = echarts.init(this.$refs.boxRef)
  },
  methods: {
    async onInfo() {
      const res = await getListInfoAPI()
      console.log(res, 11)
      this.homeData = res.data.annualIncomeArray
      this.annualIncome = res.data.annualIncome
      // console.log(this.annualIncome)
      this.enterpriseTotal = res.data.enterpriseTotal
      this.monthCardTotal = res.data.monthCardTotal
      this.chargePoleTotal = res.data.chargePoleTotal
    },
    // 查询临期合同
    async onTableList() {
      const res = await getTableListAPI(this.params)
      // console.log(res)
      this.total = res.data.total
      this.tableLIst = res.data.rows
      // this.time = [data.rows[0].startTime]
    }
  }
}
</script>

<style>
body {
  background-color: #f4f6f8;
}
.box {
  display: flex;
  justify-content: space-between;
  width: 1680px;
  /* padding-top: 20px; */
  padding: 20px 30px;
}
.left {
  width: 1130px;
  /* background-color: blue; */
}
.header {
  height: 160px;
  margin-bottom: 20px;
  line-height: 20px;
  padding: 5px 10px;
  background-color: #fff;
}
.item{
  font-size: 24px;
  color: black;
}
.headerFont {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 14px;
}
.main {
  margin-bottom: 20px;
  padding: 10px 10px ;
  height: 380px;
  background-color: #fff;
}
.footer {
  height: 550px;
  margin-bottom: 20px;
  padding: 10px 10px ;
  background-color: #fff;
}
.right {
  width: 450px;
  /* margin-top: 12px; */
}
.top{
  height: 165px;
  margin-bottom: 20px;
  background-color: #fff;
}
.bottom{
  height: 300px;
  background-color: #fff;
}
</style>
